<template>
  <div class="login" id="background">
    <form>
      <h1><img src="../img/YNUS.png"></h1>
      <p></p>
      <div class="msg-warn hide"><b></b>商家登录/用户登录</div>
      <p><input type="text" name="username" value="user.username" placeholder="商家账号/用户账号" v-model="user.username"></p>
      <p><input type="text" name="password" value="user.password" placeholder="密码" v-model="user.password"></p>
      <p><input type="button" name="getLogin" value="登  录" @click="getLogin()"></p>
      <p class="txt"><a href="register">注册</a></p>
    </form>
  </div>
</template>

<script>
export default {
  name: "UserLogin",
  data(){
    return{
      user:{
        username:'',
        password:'',
      },
      role:0,
    }
  },
  methods:{
    getLogin() {
      this.$http({
        method: "POST",
        data: this.user,
        url: 'http://localhost:84/user/login',}).then((res)=>{
            if (!res.data.flag) {
              this.$message.error(res.data.message);
              this.$message.warning("登录失败，用户名或密码不正确");
            } else {
              this.$message.success(res.data.message);
              sessionStorage.setItem('token',"Bearer "+res.data.data);
              this.getRole();
            }
      },(err)=>{
          console.log(err.message);
      });
    },

    getRole(){
      this.$http({
        method : "GET",
        params: {
          username:this.user.username
        },
        url : 'http://localhost:84/user/role',
      }).then((res)=>{
        this.role=res.data;
        if(this.role==1){
          this.$router.push('/shop');
        }
        else {
          this.$router.push('manage/shop');
        }
      },(err)=>{
        alert(err);
      })
    },

  }
}
</script>

<style scoped>
@import "../css/login.css";
#background{
  width: 100%;
  height: 100%;
  background: url("../img/20.jpg");
  background-size:100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>